//---------------------
  //找到网页上画图的位置，并且用echarts初始化这个区域
  var myChart1 = echarts.init(document.getElementById("idx1"));
  //配置绘图参数
  var option1 = {
     title: {
          text: '折线图和柱状图--周子昂',
          left: 'center',
      },
      tooltip: {
          trigger: 'axis',
      },
     xAxis: {
         type: 'category',
         data: ['周一','周二','周三','周四','周五','周六','周日'],
         name: '时间',
     },
     yAxis: {
         name: '销量',
     },
     legend: {
        top:'bottom',
     },
     series:[{
        type:'line',
       
        data:[74,85,57,68,72,47,97,],
        name: '荣耀销量',
    },{
        type:'bar',
        data:[85,69,71,25,79,82,80],
        name: '小米销量',
    }]
  };
  //画图
  myChart1.setOption(option1);
   
   
  var myChart2=echarts.init(document.getElementById("idx2"));//找位置
  //配置绘图参数
  var option2={
    title: {
        text: '周子昂',
    },
      tooltip: {
          trigger: 'axis',
      },
      grid:[
          {
           top:'5%',   
           bottom: '55%',
           left: '15%',
           right: '15%',
          },
          {
          top:'55%',   
          bottom: '5%',
          left: '15%',
          right: '15%',
          },
      ],
      xAxis: [
          {gridIndex: 0,type: 'category',
          data: ['周一','周二','周三','周四','周五','周六','周日'],
          name: '日期',},
          {gridIndex: 1,type: 'category',
          data: ['周一','周二','周三','周四','周五','周六','周日'],
          name: '日期',}
      ],
      yAxis: [
          {gridIndex: 0,name: '销量',},
          {gridIndex: 1,name: '销量',},
          ],
      series:[{
              type:'bar',
              data:[85,71,74,89,47,91,78],
              name: '荣耀销量',
              yAxisIndex: 0,
              xAxisIndex: 0,
              label: {
                  show: true,
                  position: 'top',
              },
              stack: '总量',
              },
              {
              type:'line',
              
              data:[72,47,57,78,74,85,57],
              name:'小米销量',
              
              yAxisIndex: 1,
              xAxisIndex: 1,
              label: {
                  show: true,
                  position: 'top',
              },
              stack: '总量',
              },
              ],           
  };
  //画图
  myChart2.setOption(option2);
   
   
  var myChart3 = echarts.init(document.getElementById("idx3"));
var option3 = {
    title: {
        text: '周子昂',
    },
    grid: [
        {
            top: '5%',  bottom: '55%',
            left: '10%',  right: '10%',
        },
        {
            left: '10%', right: '10%',
            bottom: '5%',   top: '55%',
        },
    ],
    tooltip: {
        trigger: 'axis',
    },
    xAxis: [{gridIndex: 0,name:'日期',type:'category',data: ['周一','周二','周三','周四','周五','周六','周日']},
    {gridIndex: 1,  name:'日期',type:'category',data: ['周一','周二','周三','周四','周五','周六','周日'],},
    ],
    yAxis: [{ gridIndex: 0, name:'销量',},
        {gridIndex: 1,name:'销量'},
    ],
        series: [{
            type:'line',
            areaStyle: {},
            name: '荣耀',
            data:[85,71,74,89,47,91,78],
            xAxisIndex: 0,
            yAxisIndex: 0,
            
        },{
            type:'line',
            areaStyle: {},
            name: '小米',
            data:[72,47,57,78,74,85,57],
            xAxisIndex: 0,
            yAxisIndex: 0,
        },{
            type:'bar',
            name: '荣耀',
            data:[85,71,74,89,47,91,78],
            xAxisIndex: 1,
            yAxisIndex: 1,
            label: {
                show: true,
                position: 'top',},
            stack: '总量',
        },{
            type:'bar',
            name: '小米',
            data:[72,47,57,78,74,85,57],
            xAxisIndex: 1,
            yAxisIndex: 1,
            label: {
                show: true,
                position: 'top',},
            stack: '总量',
        }],
};
myChart3.setOption(option3);
